// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.c-main-image {
    margin: 0 auto $layout-md;
    padding: $spacing-lg;
}

.mzp-c-picto-image {
    align-items: center;
    display: flex;
    min-height: 210px;

    picture {
        display: inline-block;
        margin: 0 auto;

        img {
            width: 100%;
        }
    }
}

.c-coupon-container {
    margin: $spacing-xl 0;
    background-color: #EDEDF0;
    border-radius: $border-radius-md;
    padding: $spacing-xl $spacing-sm;

    .c-coupon-code-wrapper {
        display: flex;
        justify-content: center;
        margin-bottom: $spacing-lg;

        .c-coupon-code {
            @include text-body-lg;
            background-color: $color-white;
            border: 2px $color-black dotted;
            border-right: none;
            border-bottom-left-radius: $border-radius-sm;
            border-top-left-radius: $border-radius-sm;
            padding: $spacing-xs $spacing-lg;
        }
    }

    h2 {
        @include font-size(30px);
        margin-bottom: $spacing-xl;
    }

    .c-coupon-copy {
        @include text-body-sm;
        display: flex;
        align-items: center;

        .copy-icon {
            height: 24px;
            width: 24px;
            background-image: url('/media/img/firefox/welcome/page16/copy-light.svg');
            display: inline-block;
        }

        &:hover {
            .copy-icon {
                    background-image: url('/media/img/firefox/welcome/page16/copy-dark.svg');
            }
        }

        &:hover,
        &:focus {
            font-weight: bold;
            text-decoration: underline;
        }
    }

    .c-coupon-expires {
        margin-bottom: 0;
    }
}

// override protocol padding on large viewports to use md screen padding
@media #{$mq-lg} {
    .mzp-l-content.mzp-t-content-md {
        padding: $layout-md $layout-lg;
    }
}

// * -------------------------------------------------------------------------- */
// Dark mode

@media (prefers-color-scheme: dark) {
    #outer-wrapper {
        background: $color-dark-gray-60;
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }

    .c-main-title,
    .mzp-c-picto-title {
        color: $title-text-color-inverse;

        @supports (--css: variables) {
            color: var(--title-text-color-inverse);
        }
    }

    .c-coupon-container {
        .c-coupon-code, small {
            color: $body-text-color;
        }
    }

    .c-utilities {
        @include white-links;
    }
}
